<!-- 修改模态框 -->
<nz-modal [(nzVisible)]="visible" nzTitle="修改" (nzOnCancel)="cancelEdit()" (nzOnOk)="edit()">
  <!-- 表单容器，用于编辑员工信息 -->
  <ng-container *nzModalContent>
    <form nz-form [formGroup]="editForm">
      <!-- 姓名输入框，包含必填验证和长度验证 -->
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzRequired>姓名</nz-form-label>
        <nz-form-control [nzSpan]="12" nzHasFeedback  [nzErrorTip]="userErrorTpl">
          <input nz-input formControlName="name" placeholder="请输入姓名"/>
          <ng-template #userErrorTpl let-control>
            @if (control.errors?.['required']) {
              姓名为必填项
            }
            @if (control.errors?.['minlength']) {
              最少填写2个字符
            }
          </ng-template>
        </nz-form-control>
      </nz-form-item>
      <!-- 性别选择，为必选项 -->
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzRequired>性别</nz-form-label>
        <nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="genderErrorTpl">
          <nz-radio-group formControlName="gender">
            <label nz-radio nzValue="1">男</label>
            <label nz-radio nzValue="0">女</label>
          </nz-radio-group>
          <ng-template #genderErrorTpl let-control>
            @if (control.errors?.['required']) {
              性别为必选项
            }
          </ng-template>
        </nz-form-control>
      </nz-form-item>
      <!-- 邮箱输入框，包含邮箱格式验证 -->
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzRequired>邮箱</nz-form-label>
        <nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="emailErrorTpl">
          <input nz-input formControlName="email" placeholder="请输入邮箱" type="email"/>
          <ng-template #emailErrorTpl let-control>
            @if (control.errors?.['email']) {
              邮箱格式错误
            }
          </ng-template>
        </nz-form-control>
      </nz-form-item>
      <!-- 手机号输入框，包含手机号格式验证 -->
      <nz-form-item>
        <nz-form-label [nzSpan]="7" >手机号</nz-form-label>
        <nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="phoneNumberErrorTpl">
          <input nz-input  formControlName="phoneNumber" placeholder="请输入手机号"/>
          <ng-template #phoneNumberErrorTpl let-control>
            @if (control.errors?.['pattern']) {
              手机号格式错误
            }
          </ng-template>
        </nz-form-control>
      </nz-form-item>
      <!-- 入职时间选择，不得晚于当前时间 -->
      <nz-form-item>
        <nz-form-label [nzSpan]="7" >入职时间</nz-form-label>
        <nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="joinDateErrorTpl">
          <nz-date-picker formControlName="joinDate" ></nz-date-picker>
          <ng-template #joinDateErrorTpl let-control>
            @if (control.errors?.['date']) {
              入职时间不得晚于今天
            }
          </ng-template>
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-container>
</nz-modal>